import React from "react";
import { recipes } from '../data/data.tsx';

interface RecipeInterface {
	id: string;
	name: string;
	ingredients: string[];
}
const Recipe : React.FC<RecipeInterface>  = ({name, ingredients } : RecipeInterface) => {
	const listItems = ingredients.map(ingredient =>  <li key={ingredient}>{ingredient}</li> );
	return (
		<div>
			<h2>{name}</h2>
			<ul>{listItems}</ul>
		</div>
	);
}

export default function RecipeList() {
	return (
		<div>
			<h1>Recipes</h1>
			{recipes.map(recipe => <Recipe key={recipe.id} {...recipe} /> )}
		</div>
	);
}